<template>
	<view class="" style="width: 100vw;height: 100vh">
	<!-- <view  style="min-height: 100vh"> -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
	kbackgroundColor
		<!-- <image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<hx-navbar title="分裂" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="container">
			<view class="chengpin_box">
				<image :src="spliList.image" mode="aspectFill" class="chengpin_img"></image>
				<!-- <image src="/static/user/next_icon.png" mode="widthFix" class="next_page"></image> -->

			</view>
			<view class="">
				<view class="shop-name">{{spliList.name}}</view>
				<view class="cell-item-cc m-t-20">
					<view class="data">
						<view class="label">截止时间</view>
						<view class="num">{{spliList.end_time}}</view>
					</view>
				</view>
			</view>
			<view class="compound_box1">
				<image src="/static/user/next_icon.png" mode="widthFix" class="next_page"></image>
				<view class="tip text-center color-9">
					分裂成以下版权
				</view>
				<view class="compound_box">
					<view class="compound_item" v-for="(item,index) in spliList.get" :key="index">
						<image :src="item.image" mode="aspectFill" class="add_btn"></image>
					</view>
				</view>
			</view>
			<view class="" style="height: 200rpx;"></view>
			<view class="btns">
				<view class="btn_btn skew" @click="go_split" v-if="spliList.split_status==1">确定分裂</view>
				<view v-else class="btn_btn1 skew">确定分裂</view>
			</view>
		</view>


	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				spliList: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.get_splitMessage()
		},
			onPullDownRefresh() {
							setTimeout(function() {
								uni.stopPullDownRefresh()
							}, 500)
			 	}, 
		methods: {
			get_splitMessage() {
				this.$api.splitMessage({
					id: this.id
				}, res => {
					if (res.status) {
						this.spliList = res.data
					}
				})
			},
			go_split() {
				this.$api.splitOrder({
					goods_id: this.spliList.id,
					sn: this.spliList.sn
				}, res => {
					if (res.status) {
						this.$common.successToShow(res.msg)
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.num_left{
		background: $text-zdy;
	}
	.num_right{
		border: solid 1rpx $text-zdy;
		color:$text-zdy ;
		background: none;
	}
	.compound_box1 {
		background-color: #fff;
		padding: 60rpx 50rpx 40rpx;
		border-radius: 20rpx;
		position: relative;
		margin-top: 95rpx;
		.next_page {
			width: 75rpx;
			height: 75rpx;
			position: absolute;
			top: -35rpx;
			left: 50%;
			transform: translateX(-50%);
			// animation: mymove .5s infinite;
		}

		@keyframes mymove {
			from {
				top: -45;
			}

			to {
				top: -50rpx;
			}
		}
		.tip {
			font-size: 24rpx;
		}
	}


	.btn_btn1 {
		background: #999 !important;
	}

	.btn_btn,
	.btn_btn1 {
		width: 650rpx;
		height: 80rpx;
		border-radius: 100rpx;
		background: $btn-bg;
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}


	.btns {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 50rpx;
		left: 0;
	}

	.container {
		padding: 20rpx 25rpx;

		.chengpin_box {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.chengpin_img {
				width: 670rpx;
				height: 670rpx;
				border-radius: 20rpx;
			}
			

			@keyframes mymove {
				from {
					top: 0;
				}

				to {
					top: 20rpx;
				}
			}

			.next_page {
				width: 49rpx;
				height: 54rpx;
				position: relative;
				margin-top: 50rpx;
				animation: mymove .5s infinite;
			}
		}
		.shop-name {
			text-align: center;
			font-size: 32rpx;
			color: #000;
			font-weight: 400;
			margin: 30rpx 0 20rpx;
		}
		
		.data {
			display: flex;
			align-items: center;
			border-radius: 5rpx;
			overflow: hidden;
			.label {
				width: 110rpx;
				height: 40rpx;
				background-color: #863A3A;
				border-radius: 5rpx 0 0 5rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #fff;
				font-weight: 500;
			}
			.num {
				display: inline-block;
				min-width: 100rpx;
				height: 40rpx;
				background-color: #FFF0F2;
				padding: 0 15rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #000;
				font-weight: 500;
			}
		}
	}

	.add_btn {
		width: 176rpx;
		height: 176rpx;
		border-radius: 20rpx;
	}

	.compound_box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 10;
		margin-top: 40rpx;
		.compound_item {
			width: 176rpx;
			height: 176rpx;
			position: relative;
			z-index: 10;
			margin: 30rpx 10rpx 0;
		}
		& > view:nth-child(-n+3) {
			margin-top: 0;
		}
	}
</style>